<script setup>
  import {Histogram, SoldOut, ElementPlus, Sell } from '@element-plus/icons-vue';
  import {ref} from "vue";

  const props = defineProps({isCollapse: Boolean})
  const handleOpen = function (key, keyPath) {
console.log(key, keyPath);
}
  const handleClose = function (key, keyPath) {
console.log(key, keyPath);
}
</script>

<template>
  <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      default-active="1"
      text-color="#fff"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
      style="height: 100%"
      :collapse-transition=false
      router
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><ElementPlus /></el-icon>
        <span>基本管理</span>
      </template>
      <el-menu-item-group title="基本管理">
        <el-menu-item index="/employee">员工</el-menu-item>
        <el-menu-item index="/product">商品</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>
        <el-icon><SoldOut /></el-icon>
        <span slot="title">采购管理</span>
      </template>
      <el-menu-item-group title="采购管理">
        <el-menu-item index="/vendor">供应商</el-menu-item>
        <el-menu-item index="/inbuy">采购表</el-menu-item>
        <el-menu-item index="/details">采购明细</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>
        <el-icon><Sell /></el-icon>
        <span slot="title">销售管理</span>
      </template>
      <el-menu-item-group title="销售管理">
        <el-menu-item index="/customer">顾客</el-menu-item>
        <el-menu-item index="outsell">销售明细</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="4">
      <template #title>
        <el-icon><Histogram /></el-icon>
        <span slot="title">统计查询</span>
      </template>
      <el-menu-item-group title="统计查询">
        <el-menu-item index="/countProduct">商品统计</el-menu-item>
        <el-menu-item index="/countInbuy">采购统计</el-menu-item>
      </el-menu-item-group>/
    </el-sub-menu>
  </el-menu>
</template>

<style scoped>

</style>